
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>根据起终点经纬度查询驾车路线</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        #container{
            min-width:600px;
            min-height:767px;
        }
        #routes{
            width: 220px;
            height: 400px;
            position: absolute;
            right: 10px;
            top: 120px;
            background: url(img/ver.png);
            z-index: 9999;
            border-radius: 10px;
            color: #ff;
        }
        #routes p{ color: #fff; }
        .routes_box{ margin:10px; }
        .routes_box .title{ font-size: 16px; text-align: center; color: red; }

    </style>

    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=DRXBZ-Q3CHG-6KOQN-IJY6G-LDCS5-W4BZZ"></script>
    <script>
        var map, 
        directionsService = new qq.maps.DrivingService({
            complete : function(response){
                var start = response.detail.start,
                end = response.detail.end;

                var anchor = new qq.maps.Point(6, 6),
                size = new qq.maps.Size(24, 36),
                start_icon = new qq.maps.MarkerImage(
                    'img/busmarker.png', 
                    size, 
                    new qq.maps.Point(0, 0),
                    anchor
                    ),
                end_icon = new qq.maps.MarkerImage(
                    'img/busmarker.png', 
                    size, 
                    new qq.maps.Point(24, 0),
                    anchor

                    );
                start_marker && start_marker.setMap(null); 
                end_marker && end_marker.setMap(null);
                clearOverlay(route_lines);

                start_marker = new qq.maps.Marker({
                  icon: start_icon,
                  position: start.latLng,
                  map: map,
                  zIndex:1
              });
                end_marker = new qq.maps.Marker({
                  icon: end_icon,
                  position: end.latLng,
                  map: map,
                  zIndex:1
              });
                console.log(response.detail.distance);
                directions_routes = response.detail.routes;
                var routes_desc=[];
               //所有可选路线方案
               for(var i = 0;i < directions_routes.length; i++){
                var route = directions_routes[i],
                legs = route; 
                    //调整地图窗口显示所有路线    
                    map.fitBounds(response.detail.bounds); 
                    //所有路程信息            
                    //for(var j = 0 ; j < legs.length; j++){
                        var steps = legs.steps;
                        route_steps = steps;
                        polyline = new qq.maps.Polyline(
                        {
                            path: route.path,
                            strokeColor: '#3893F9',
                            strokeWeight: 6,
                            map: map
                        }
                        )  
                        route_lines.push(polyline);
                         //所有路段信息
                         for(var k = 0; k < steps.length; k++){
                            var step = steps[k];
                            //路段途经地标
                            directions_placemarks.push(step.placemarks);
                            //转向
                            var turning  = step.turning,
                            img_position;; 
                            switch(turning.text){
                                case '左转':
                                img_position = '0px 0px'  
                                break;
                                case '右转':
                                img_position = '-19px 0px'  
                                break;
                                case '直行':
                                img_position = '-38px 0px'  
                                break;  
                                case '偏左转':
                                case '靠左':
                                img_position = '-57px 0px'  
                                break;      
                                case '偏右转':
                                case '靠右':
                                img_position = '-76px 0px'  
                                break;
                                case '左转调头':
                                img_position = '-95px 0px'  
                                break;
                                default:
                                mg_position = ''  
                                break;
                            }
                            var turning_img = '&nbsp;&nbsp;<span'+
                            ' style="margin-bottom: -4px;'+
                            'display:inline-block;background:'+
                            'url(img/turning.png) no-repeat '+
                            img_position+';width:19px;height:'+
                            '19px"></span>&nbsp;' ;
                            var p_attributes = [
                            'onclick="renderStep('+k+')"',
                            'onmouseover=this.style.background="red"',
                            'onmouseout=this.style.background="green"',
                            'style="margin:5px 0px;cursor:pointer"'
                            ].join(' ');
                            routes_desc.push('<p '+p_attributes+' ><b>'+(k+1)+
                                '.</b>'+turning_img+step.instructions);
                        }
                    //}
                }
               //方案文本描述
               var routes=document.getElementById('routes');
               routes.innerHTML = '<div class="routes_box"><div  class="title">导航距离：'+response.detail.distance/1000+'公里</div>'+routes_desc.join('<br>')+'</div>';
           }
       }),
directions_routes,
directions_placemarks = [],
directions_labels = [],
start_marker,
end_marker,
route_lines = [],
step_line,
route_steps = [];

function init() {
    map = new qq.maps.Map(document.getElementById("container"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(33.00595,114.01663)
        });
    calcRoute();
}
function calcRoute() {
    var start_name = document.getElementById("start").value.split(",");
    var end_name = document.getElementById("end").value.split(",");
    var policy = document.getElementById("policy").value;
    route_steps = [];

    directionsService.setLocation("驻马店");
    directionsService.setPolicy(qq.maps.DrivingPolicy[policy]);
    directionsService.search(new qq.maps.LatLng(start_name[0], start_name[1]), 
        new qq.maps.LatLng(end_name[0], end_name[1]));
}
    //清除地图上的marker
    function clearOverlay(overlays){
        var overlay;
        while(overlay = overlays.pop()){
            overlay.setMap(null);
        }
    }
    function renderStep(index){   
        var step = route_steps[index];
        //clear overlays;
        step_line && step_line.setMap(null);
        //draw setp line      
        step_line = new qq.maps.Polyline(
        {
            path: step.path,
            strokeColor: '#ff0000',
            strokeWeight: 6,
            map: map
        }
        )
    }
    //显示路段路标
    function showP(){
        var showPlacemark  = document.getElementById('sp');
        if(showPlacemark.checked){
            for(var i=0;i<directions_placemarks.length;i++){
                var placemarks = directions_placemarks[i];
                for(var j=0;j<placemarks.length;j++){
                    var placemark = placemarks[j];
                    var label = new qq.maps.Label({
                        map: map,
                        position: placemark.latLng,
                        content:placemark.name
                    });
                    directions_labels.push(label);
                }
            }
        }else{
            clearOverlay(directions_labels);
        }
    }    
</script>
</head>
<body onload="init();">
    <div style='margin:5px 0px'>
        <b>起点: </b>
        <select id="start" onchange="calcRoute();">
          <option value="33.00595,114.01663">33.00595,114.01663</option>
      </select>
      <b>终点: </b>
      <select id="end" onchange="calcRoute();">
          <option value="32.978603,114.03248">32.978603,114.03248</option>
      </select>
      <b>计算策略：</b>
      <select id="policy" onchange="calcRoute();">
          <option value="LEAST_TIME">最少时间</option>
          <option value="LEAST_DISTANCE">最短距离</option>
          <option value="AVOID_HIGHWAYS">避开高速</option>
          <option value="REAL_TRAFFIC">实时路况</option>
          <option value="PREDICT_TRAFFIC">预测路况</option>
      </select>
      <label>
          <input id="sp" type="checkbox" value='1' onclick='showP()'/>
          显示路段地标
      </label>
  </div>
  <div id="container"></div>
  <div  id="routes"></div>
</body>
</html>
